<template>
  <div class="info">
    <div class="rightContent">
      <div class="Cheader">
        <span class="title">&nbsp;基本资料</span>
      </div>
      <div class="headerInfo">
        请完善以下信息，方便我们更好的为您服务
      </div>
      <el-form ref="form" :model="this.userInfo" label-width="80px">
      <div class="content">
        <div class="headerInfoTitle">
          基本信息
        </div>
        <div class="userMessage">
          <span class="leftT">会员身份：</span>
          <span class="rightC" v-if="userInfo.ty === '0'"> 个人</span>
          <span class="rightC" v-if="userInfo.ty === '1'"> 企业</span>
        </div>
        <div class="userMessage">
          <span class="leftT">真实姓名：</span>
          <span class="rightC"> {{userInfo.name}}</span>
        </div>
        <div class="headerInfoTitle">
          业务信息
        </div>
        <div class="userMessage">
          <span class="leftT1">个人主要行业应用：</span>
          <span class="rightC">
            <el-select v-model="value" placeholder="请选择" >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 63px">主营业务：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="" style="width: 400px" v-model="userInfo.mainx"></el-input>
          </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 95px">网址：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="" v-model="userInfo.url" style="width: 400px"></el-input>
          </span>
        </div>
        <div class="headerInfoTitle">
          联系信息
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 58px">国家/地区：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="" v-model="userInfo.country" style="width: 400px" ></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 65px">所在地区：</span>
          <span class="rightC" >
              <el-cascader
                class="cityMessage"
                size="large"
                clearable
                :options="citys"
                v-model="addMirror.city"
                @change="handleChange"
                change-on-select
                placeholder="省/市/区">
              </el-cascader>
          </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 65px">街道地址：</span>
          <span class="rightC">
              <el-input class="handInput" placeholder="" v-model="userInfo.addr" style="width: 400px"></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 65px">联系电话：</span>
          <span class="rightC">
              <el-input class="handInput" v-model="userInfo.mobile" placeholder="例如：0571-88888888" style="width: 400px"></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 95px">传真：</span>
          <span class="rightC">
              <el-input class="handInput" v-model="userInfo.fax" placeholder="例如：86057188888888" style="width: 400px"></el-input>
            </span>
        </div>
        <div class="userMessage">
          <span class="leftT1" style="padding-left: 145px"></span>
          <span class="rightC">
            <el-button type="primary" @click="updateInfo">保存</el-button>

            </span>
        </div>
      </div>
      </el-form>
      <input type="button" value="-" @click="del"/>
      {{this.num}}
      <input type="button" value="+" @click="add"/>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import { regionData } from 'element-china-area-data'
  export default {
    data() {
      return {
        // num: this.$store.getters.num,
        citys: regionData,
        accesstoken: window.localStorage.getItem('access_token'),
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        submitBasic: {
          access_token: '',
          type: 'get_account_base'
        },
        userInfo: {},
        addMirror: {
          account: '账户id',
          industry_type: '行业类别',
          mainx: '主营业务',
          url: '网址',
          country: '国家',
          province: '省',
          addr: '地址',
          phone: '电话',
          fax: '传真'
        },
        city1: [],
        submitUpdate: {
          access_token: 'access_tokenxxxxxxxx: ',
          type: 'pdate_account_base',
          data: {
            account: '账户id',
            industry_type: '行业类别',
            mainx: '主营业务',
            url: '网址',
            country: '国家',
            province: '省',
            city: '市',
            addr: '地址',
            phone: '电话',
            fax: '传真'
          }
        }
      }
    },
    mounted() {
      this.queryuserInfo()
    },
    computed: {
      num() {
        return this.$store.getters.num
      }
    },
    methods: {
      add() {
        this.$store.dispatch('AddCreate')
      },
      del() {
        this.num -= 5
      },
      handleChange() {
        var shen = ''
        var shi = ''
        // var qu = ''
        for (var i = 0; i < this.citys.length; i++) {
          if (this.citys[i].value === this.addMirror.city[0]) {
            shen = this.citys[i].label
            for (var o = 0; o < this.citys[i].children.length; o++) {
              if (this.citys[i].children[o].value === this.addMirror.city[1]) {
                shi = this.citys[i].children[o].label
                for (var p = 0; p < this.citys[i].children[o].children.length; p++) {
                  if (this.citys[i].children[o].children[p].value === this.addMirror.city[2]) {
                    // qu = this.citys[i].children[o].children[p].label
                  }
                }
              }
            }
          }
        }
        this.city1 = this.addMirror.city[2]
        this.submitUpdate.data.province = shen
        this.submitUpdate.data.city = shi
      },
      // 基本信息获取
      queryuserInfo() {
        this.submitBasic.access_token = this.accesstoken
        axios.post(process.env.SERVER_URL_4A + '/account', this.submitBasic, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.userInfo = res.data.data
          this.value = this.userInfo.industry_type
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 修改基本信息
      updateInfo() {
        this.submitUpdate.access_token = this.accesstoken
        this.submitUpdate.data.account = this.userInfo.account
        this.submitUpdate.data.industry_type = this.value
        this.submitUpdate.data.mainx = this.userInfo.mainx
        this.submitUpdate.data.url = this.userInfo.url
        this.submitUpdate.data.country = this.userInfo.country
        // this.submitUpdate.data.province = this.userInfo.province
        // this.submitUpdate.data.city = this.userInfo.city
        this.submitUpdate.data.addr = this.userInfo.addr
        this.submitUpdate.data.phone = this.userInfo.mobile
        this.submitUpdate.data.fax = this.userInfo.fax
        axios.post(process.env.SERVER_URL_4A + '/account', this.submitUpdate, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.errcode === '00000') {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .info{
    .configTop{
      width: 100%;
      height: 40px;
      .configTitle{
        font-size: 16px;
        color: #676A70;
        padding-left: 5px;
        border-left: 5px solid #25B6C7;
        height: 16px;
      }
    }
    .rightContent{
      width: 90%;
      height: 900px;
      margin-left: 200px;
      /*float: right;*/
      .Cheader {
        width: 100%;
        height: 38px;
        line-height: 38px;
        .title {
          border-left: 5px solid #25B6C7;
        }
      }
      .headerInfo{
        width: 100%;
        height: 40px;
        line-height: 40px;
        background-color: #E6EFEF;
        font-size:12px;
        font-family:MicrosoftYaHeiLight;
        font-weight:300;
        color:rgba(102,102,102,1);
        padding-left: 10px;
      }
      .content{
        width: 900px;
        height: 600px;
        .headerInfoTitle{
          width: 300px;
          height: 40px;
          line-height: 40px;
          font-size:16px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(50,56,66,1);
        }
        .userMessage{
          width: 700px;
          height: 40px;
          .leftT{
            width:300px;
            height: 40px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            margin-left: 100px;
            color:rgba(50,56,66,1);
            text-align: right;
          }
          .leftT1{
            width:300px;
            height: 40px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(50,56,66,1);
            text-align: right;
            margin-left: 37px;
          }
          .rightC{
            width:600px;
            height: 40px;
            padding-left: 10px;
            line-height: 40px;
            font-family:MicrosoftYaHeiLight;
            font-weight:300;
            color:rgba(50,56,66,1);
            text-align: right;
          }

          /deep/ .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
          /deep/ .el-button--primary {
            height: 30px;
            font-size: 14px;
            padding: 6px 16px;
            background: #25B6C7;
            border-color: #25B6C7;
            margin-top: 10px;
          }
        }
      }
    }
  }

</style>
